<template>
  <div id="app">
    <!-- 其他内容 -->
    <van-card
      v-for="(item, index) in cartList"
      :key="item.id"
      :num="item.num"
      :price="item.price"
      :title="item.title"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      @delete="onDelete(index)"
      @num-change="onNumChange(index, $event)"
    />
    <div style="height: 60px"></div>
    <BottomNav />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from "vue";
  import BottomNav from "./../../components/Tabbar/index.vue";
  import { ref } from "vue";
  // import { formatPrice } from '@/utils/helper';
  export default defineComponent({
    components: {
      BottomNav,
    },
    setup() {
      const cartList = ref([
        { id: 1, title: "商品标题1", price: 100, num: 1 },
        { id: 2, title: "商品标题2", price: 200, num: 2 },
        { id: 1, title: "商品标题1", price: 100, num: 1 },
        { id: 2, title: "商品标题2", price: 200, num: 2 },
        { id: 1, title: "商品标题1", price: 100, num: 1 },
        { id: 2, title: "商品标题2", price: 200, num: 2 },
        { id: 1, title: "商品标题1", price: 100, num: 1 },
        { id: 2, title: "商品标题2", price: 200, num: 2 },
        { id: 1, title: "商品标题1", price: 100, num: 1 },
        { id: 2, title: "商品标题2", price: 200, num: 2 },
      ]);
      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
      const onDelete = (index: number) => {
        cartList.value.splice(index, 1);
      };
      // 商品数量变化
      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
      const onNumChange = (index: number, num: number) => {
        cartList.value[index].num = num;
      };
      return {
        cartList,
        onDelete,
        onNumChange,
      };
    },
  });
</script>
